<template>
  <div class="wrapper" style="overflow:hidden">
    <nav-bar class="nav-bar">
      <div slot="center">商品分类</div>
    </nav-bar>
      <ul class="left tab_list">
        <li @click="subCate(firsTab.maitKey,firsTab.index)" >
          <a class="current" >{{firsTab.title}}</a>
        </li>
        <li v-for="(item,index) in cateList" :key="item.maitKey" :index="index + 1" @click="subCate(item.maitKey,index)">
          <a>{{item.title}}</a>
        </li>
      </ul>
      <div class="right">
        <div class="cate-item" v-for="(item,id) in subCateList" :key="id">
            <div class="cate-img">
              <img :src="item.image" alt="">
              <span>{{item.title}}</span>
            </div>
        </div>
      </div>
  </div>

</template>

<script>
import NavBar from '../../components/common/navbar/NavBar'
import { getCategory, getSubCategory } from '../../network/category'
	export default {
    components: {
      NavBar
    },
    data() {
      return {
        cateList: [],
        subCateList: [],
        isActive: true,
        firsTab: {},
      }
    },
    methods: {
      async getCategory() {
        const { data: res } = await getCategory()
        this.cateList = res.category.list
        this.firsTab = this.cateList[0]
        this.firsTab.index = -1
        this.cateList.splice(0,1)
      },
      async getsubCate(key) {
        const { data: res } = await getSubCategory(key)
        this.subCateList = res.list
      },
      subCate(maitKey, index) {
        var lis = document.querySelector('.tab_list')
        var as = lis.querySelectorAll('a')
        for (let i = 0; i < as.length; i++) {
          as[i].className = ''
        }
        // console.log(index)
        as[index+1].className = 'current'
        this.getsubCate(maitKey)
      }
    },
    created() {
      this.getCategory()
      this.getsubCate('3627')
    },
    mounted() {
      this.isActive = false
    }
  }
</script>

<style scoped>
  .nav-bar {
      background-color: var(--color-tint);
      color: #fff;
    }
  .left {
    float: left;
    width: 90px;
    height: calc(100vh - 44px - 49px);
    background-color: #eee;
    overflow: scroll;
    font-size: 13px;
  }
  .left :nth-child(n+2) {
    margin-top: 5px;
  }
  .left li {
    height: 45px;
    list-style: none;
    text-align: center;
    line-height: 45px;
  }
  .left li a {
    display: inline-block;
    width: 100%;
    height: 100%;

  }
  .current {
    color: var(--color-tint);
    background-color: #fff !important;
    border-left: 3px solid var(--color-tint)
  }
  .right {
    float: initial;
    height: calc(100vh - 44px - 49px);
    overflow: scroll;
    margin-top: 10px;
    font-size: 10px;
  }

  .cate-item {
    display: inline-block;
    height: 80px;
    width: 70px;
    font-size: 10px;
    text-align: center;
    margin: 0.2rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cate-img {
    height: 50px;
    width: 50px;
    margin: auto;
  }
  .cate-img img {
    width: 100%;
    height: 100%;
  }
  .cate-item span{
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
